<template>
<div>
  <van-cell :title="title" class="area-input">
    <template #label>
      <van-field readonly clickable :required="required" input-align="right" v-model="form.province.name" label="省份" placeholder="请选择省份" readonly @click="handleAddress('province', 0)" />
      <van-field readonly clickable :required="required" input-align="right" v-model="form.city.name" label="市" placeholder="请选择市" readonly @click="handleAddress('city', form.province.id)" />
      <van-field readonly clickable :required="required" input-align="right" v-model="form.district.name" label="县区" placeholder="请选择县区" readonly @click="handleAddress('district', form.city.id)" />
    </template>
  </van-cell>
  <van-popup v-model="popup.show" position="bottom" :style="{ maxHeight: '90%' }">
    <van-picker show-toolbar ref="areaColumn" value-key="name" :loading="loading" title="标题" :columns="popup.list" @change="onChange"  @cancel="popup.show = false" @confirm="getArea"/>
  </van-popup>
</div>
</template>

<script>
export default {
  props:{
    required: {
      type: Boolean,
      default: () => false,
    },
    areaId:{
      type: Array,
      default: () => [],
    },
    title:{
      type: String,
      default: () => '区域'
    }
  },
  data(){
    return{
      show: false,
      loading: false,
      form:{
        province: {},
        city: {},
        district: {},
      },
      columnIndex:{
        province: null,
        city: null,
        district: null,
      },
      popup: {
        show: false,
        type: null,
        list: [],
        provinceList:[],
        cityList: [],
        districtList: [],
      }

    }
  },
  async created(){  
    await this.$http('get', '/common/area/0', {}, (data,msg) => {
      this.popup.provinceList = data.rows;
      if(this.areaId.length > 0){
        let arr = this.popup.provinceList.filter(item => item.id == this.areaId[0]);
        this.form.province = {id: this.areaId[0], name: arr[0].name};
      }
    });
    if(this.areaId.length > 0){
      await this.$http('get', '/common/area/' + this.areaId[0], {}, (data,msg) => {
        this.popup.cityList = data.rows;
        let arr = data.rows.filter(item => item.id == this.areaId[1]);
        this.form.city = {id: this.areaId[1], name: arr[0].name};
      });
      await this.$http('get', '/common/area/' + this.areaId[1], {}, (data,msg) => {
        this.popup.districtList = data.rows;
        let arr = data.rows.filter(item => item.id == this.areaId[2]);
        this.form.district = {id: this.areaId[2], name: arr[0].name};
      });
    }
  },
  watch:{
    'form.province':{
      handler(newVal, oldVal) {
        this.form.city = {};
        this.form.district = {};
      },
      immediate: true,
      deep: true
    },
    'form.city': {
      handler(newVal, oldVal) {
        this.form.district = {};
      },
      immediate: true,
      deep: true
    },
  },
  methods:{
    async init(row){
      
      this.show = true;
    },
    handleAddress(type, id){      
      if(!id && id!=0){
        this.$toast('请选择上一级');
        return;
      }
      this.popup.type = type;
      this.popup.show = true;
      if(type == 'province' && this.popup.provinceList.length > 0){
        this.popup.list = this.popup.provinceList;
        return;
      }      
      this.loading = true;
      this.$http('get', '/common/area/' + id, {}, (data,msg) => {
        this.popup[type+'List'] = data.rows;
        this.popup.list = data.rows;
        this.loading = false;
      });
    },
    onChange(picker, value, index){
      let arr = this.$refs.areaColumn.getValues();
      console.log(arr, value, index);
      this.columnIndex[this.popup.type] = index;
    },
    getArea(val){
      this.form[this.popup.type] = val;
      this.$emit('confirm', this.form);
      this.popup.show = false;
    }
  }
}
</script>

<style scoped>
  .van-field__control+.van-field__control{padding-top:10px;}
</style>